<template>
  <div class="barChart" id="id_EveryDayRunTime"></div>
</template>

<script setup>
import { watch, shallowRef, ref, onMounted, reactive, defineExpose } from 'vue'
import * as echarts from 'echarts';
import { useVisualizingCustomerStore } from '/@/stores/visualizingCustomer'
import { storeToRefs } from 'pinia';
import { getEquipRunTimeDayData } from '/@/api/visualizing/slave'
import lodash from 'lodash'
import { formatStringDate } from '/@/utils/formatTime'

const myChart = shallowRef(null)
const store = useVisualizingCustomerStore()
const { customer_id, current_equip_num } = storeToRefs(store)

const setChart = (dateArray, runTimeData) => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      left: "12%",
      top: "10%",
      itemWidth: 7,
      itemHeight: 7,
      textStyle: {
        color: '#5CB1C1',
      }
    },
    grid: {
      top: '12%',
      bottom: '12%',
      left: "10%",
      right: '10%',
      containLabel: false
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        axisLine: {
          symbol: ['none', 'arrow'],
          symbolSize: [6, 6],
          symbolOffset: [0, 10],
          lineStyle: {
            color: '#122C49'
          }
        },
        axisTick: { show: false },
        axisLabel: {
          color: '#61B9C8',
          fontSize: 10,
        },
        data: dateArray,
      }
    ],
    yAxis: [
      {
        type: 'value',
        scale: true,
        axisLine: {
          show: true,
          symbol: ['none', 'arrow'],
          symbolSize: [6, 6],
          lineStyle: {
            color: '#122C49'
          }
        },
        axisLabel: {
          show: true,
          color: '#61B9C8',
          showMaxLabel: false,
          fontSize: 10
        },
        splitLine: {
          show: false,
        },
        name: '(秒)',
        nameGap: -5,
        nameTextStyle: {
          color: '#61B9C8',
          fontSize: 9,
          align: 'right',
          padding: [0, 4, 0, 0]
        },
      }
    ],
    series: [
      {
        name: '秒',
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#B21356' // 0% 处的颜色
            },
            {
              offset: 0.4, color: '#B21356' // 40% 处的颜色
            }, {
              offset: 1, color: '#F59111' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          } //背景渐变色
        },
        barWidth: 10,
        data: runTimeData
      },
    ]
  };
  if (!myChart.value) myChart.value = echarts.init(document.getElementById('id_EveryDayRunTime'));
  myChart.value.clear();
  myChart.value.setOption(option);
}
const getEquipRunTimeDayDataData = async () => {
  const res = await getEquipRunTimeDayData(customer_id.value, current_equip_num.value.equipNum)
  const dataList = lodash.get(res, 'data.list', [])
  const dateArray = [], runTimeData = []
  dataList.map(item => {
    dateArray.push(formatStringDate(item.equipDate, 'mm-dd'))
    runTimeData.push(item.runTime)
  })
  setChart(dateArray, runTimeData)
  setTimeout(() => {
    getEquipRunTimeDayDataData()
  }, 1000 * 3);
}
watch(() => current_equip_num.value.id, (newVal, oldVal) => {
  getEquipRunTimeDayDataData();
}, { deep: true })

const resize = () => {
  myChart.value && myChart.value.resize()
}
defineExpose({
  resize
})
</script>

<style lang="less" scoped>
.barChart {
  width: 100%;
  height: 100%;
}
</style>
